<template>
    <div class="content">
        <Form :label-width="200" :model="form" :rules="rules" ref="form">
            <FormItem label="班级编号">
                <Input
                    disabled
                    placeholder="系统自动编号"
                    :value="form.classNo"
                ></Input>
            </FormItem>
            <FormItem label="班级名称" prop="className">
                <Input
                    :maxlength="30"
                    placeholder="请输入班级名称"
                    v-model="form.className"
                ></Input>
            </FormItem>
            <FormItem label="所属院系" prop="collegeId">
                <RemoteSearch
                    v-model="form.collegeId"
                    :list="collegeList"
                    keywordFiled="collegeName"
                    valueField="collegeId"
                    :labelFieldList="['collegeName']"
                    style="width: 200px"
                    @get-all="collegeChange"
                />
            </FormItem>
            <FormItem label="所属专业" prop="majorId">
                <RemoteSearch
                    :disabled="!form.collegeId"
                    v-model="form.majorId"
                    :list="majorList"
                    keywordFiled="majorName"
                    valueField="majorId"
                    :labelFieldList="['majorName']"
                    style="width: 200px"
                />
            </FormItem>
            <FormItem label="入学学年" prop="enterYear">
                <DatePicker
                    type="year"
                    :value="form.enterYear"
                    @on-change="yearChange"
                    placeholder="入学学年"
                    style="width: 200px"
                ></DatePicker>
            </FormItem>
            <FormItem label="任课教师" prop="teacherId">
                <RemoteSearch
                    :disabled="isTeacher"
                    style="width: 200px"
                    v-model="form.teacherId"
                    :list="teaList"
                    keywordFiled="label"
                    valueField="value"
                    :labelFieldList="['label']"
                />
            </FormItem>
            <FormItem>
                <div class="submit-footer">
                    <Button type="primary" @click="submit">保存</Button>
                    <Button @click="handleCancel">取消</Button>
                </div>
            </FormItem>
        </Form>
    </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import { createClass, queryClassInfo, updateClass } from '@/api/classManage'
import { queryTeacherList } from '@/api/userManage'
import { majorList } from '@/api/schoolManage'

export default {
    inject: ['nextPageReload'],
    props: {
        id: {
            type: String,
            default: ''
        }
    },
    data () {
        return {
            teaList: [],
            form: {
                classId: '',
                classNo: '',
                className: '',
                collegeId: '',
                majorId: '',
                enterYear: '',
                teacherId: ''
            },
            rules: {
                className: [
                    {
                        required: true,
                        message: '请输入教师账号',
                        trigger: 'blur'
                    },
                    {
                        max: 30,
                        min: 1,
                        message: '1到30位',
                        trigger: 'change,blur'
                    }
                ],
                majorName: [
                    {
                        required: true,
                        message: '请输入教师姓名',
                        trigger: 'blur'
                    },
                    {
                        max: 30,
                        min: 1,
                        message: '1到30位',
                        trigger: 'change,blur'
                    }
                ],
                enterYear: [
                    {
                        required: true,
                        message: '请选择入学学年',
                        trigger: 'change'
                    }
                ],
                teacherId: [
                    {
                        required: true,
                        message: '请选择任课教师',
                        trigger: 'change'
                    }
                ],
                collegeId: [
                    { required: true, message: '请选择所属院系', trigger: 'blur' }
                ],
                majorId: [
                    { required: true, message: '请选择所属专业', trigger: 'blur' }
                ]
            },
            collegeList: []
        }
    },
    computed: {
        ...mapState({
            isTeacher: state => state.user.roleType === '3',
            userId: state => state.user.userId
        }),
        majorList () {
            const { collegeId } = this.form
            if (!collegeId) return []
            const target = this.collegeList.find(item => item.collegeId === collegeId)
            return (target && target.major) || []
        }
    },
    mounted () {
        const id = this.id
        id && this.queryInfo(id)
        if (this.isTeacher) {
            // 教师端新建班级默认绑定当前用户，不可编辑
            this.form.teacherId = this.userId
        }
        this.queryTeaList().then(() => {
            if (!this.form.teacherId && this.teaList[0]) {
                this.form.teacherId = this.teaList[0].value
            }
        })
        this.queryCollegeList()
    },
    methods: {
        ...mapMutations(['removeTagNav']),
        queryTeaList () {
            return queryTeacherList({
                pageNum: 1,
                pageSize: 9999
            }).then(res => {
                if (res.data.code === '0000') {
                    const data = res.data.data
                    this.teaList = Object.freeze(data.list.map(item => ({
                        value: item.userId,
                        label: item.realName
                    })))
                }
            })
        },
        yearChange (v) {
            this.form.enterYear = v || ''
        },
        collegeChange (v) {
            this.form.majorId = ''
        },
        queryCollegeList () {
            majorList().then(res => {
                if (res.data.code === '0000') {
                    this.collegeList = res.data.data.collegeList
                } else {
                    this.$Message.error(res.data.data)
                }
            })
        },
        queryInfo (id) {
            queryClassInfo(id).then(res => {
                if (res.data.code === '0000') {
                    this.form = res.data.data
                }
            })
        },
        submit () {
            this.$refs.form.validate(v => {
                if (v) {
                    const fn = this.form.classId ? updateClass : createClass
                    fn(this.form).then(res => {
                        if (res.data.code === '0000') {
                            this.$Message.success('保存成功')
                            this.nextPageReload()
                            this.handleCancel()
                        } else {
                            this.$Message.error(res.data.data)
                        }
                    })
                }
            })
        },
        handleCancel () {
            this.removeTagNav(this.$route)
            this.$router.replace({
                name: 'classManageList'
            })
        }
    }
}
</script>
<style lang="less" scoped>
.ivu-form {
    max-width: 800px;
}
</style>
